<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
	<th:block th:include="include :: header('数据列表')" />
	<th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: ztree-css" />
</head>
<body class="gray-bg">
	<div class="ui-layout-center">
		<div class="container-div">
			<div class="row">

		        <div class="btn-group-sm" id="toolbar" role="group">
		        	<a class="btn btn-success" onclick="addChapter()" >
		                <i class="fa fa-plus"></i> 新增章节
		            </a>
		        </div>
		        
		        <div class="col-sm-12 select-table table-striped">
				    <table id="bootstrap-table"></table>
				</div>
			</div>
		</div>
	</div>
	
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: layout-latest-js" />
	<th:block th:include="include :: ztree-js" />
	<script th:inline="javascript">
		var chapterList = [[${list}]];
		var bookId = [[${bookId}]];
		var prefix = ctx + "chapter";
		$(function() {
			queryUserList();
		});

		function queryUserList() {
		    var options = {
				url: prefix + "/refreshlist?bookId=" + bookId,
				createUrl: prefix + "/addChapter/{id}",
				removeUrl: prefix + "/removeChapter",
				showSearch: false,
				showRefresh: false,
				showToggle: false,
				showColumns: false,
				clickToSelect: true,
				maintainSelected: true,
				modalName: "",
		        columns: [{
		            checkbox: true
		        },
		        {
		            field: 'chapterId',
		            title: '章节ID'
		        },
		        {
		            field: 'chapterName',
		            title: '章节名称'
		        },
				{
					field: 'readTime',
					title: '学习所需时间(秒)'
				},
					{
						field: 'orderNum',
						title: '排序'
					},
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		                var actions = [];
		                actions.push('<a class="btn btn-success btn-xs '  + '" href="javascript:void(0)" onclick="view(\'' + row.fileName + '\')"><i class="fa fa-edit"></i>预览</a> ');
		                actions.push('<a class="btn btn-danger btn-xs '  + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.chapterId + '\')"><i class="fa fa-remove"></i>删除</a> ');
						actions.push("<a class='btn btn-info btn-xs' href='javascript:void(0)' onclick='addQues(" + row.chapterId + ")'><i class='fa fa-arrows'></i>设置问题</a> ");
						return actions.join('');
		            }
		        }]
		    };
		    $.table.init(options);
		}

		function addChapter(){
			var url = prefix + "/addChapter/" + bookId;
			$.modal.openTab("添加章节" + table.options.modalName, url);
		}

		function view(filename) {
			var url = window.location.protocol + "//" + window.location.host + "/view/" + filename;
			$.modal.openTab("预览" + table.options.modalName, url);
		}

		function addQues(id){
			var url = ctx + "chapter/addQues/" + id;
			$.modal.openTab("问题设计" + table.options.modalName, url);
		}


		function queryDeptTree()
		{
			var url = ctx + "book/bjtree";
			var options = {
		        url: url,
		        expandLevel: 2,
		        onClick : zOnClick
		    };
			$.tree.init(options);
			
			function zOnClick(event, treeId, treeNode) {
				$("#deptId").val(treeNode.id);
				$("#parentId").val(treeNode.pId);
				$.table.search();
			}
		}
		
		$('#btnExpand').click(function() {
			$._tree.expandAll(true);
		    $(this).hide();
		    $('#btnCollapse').show();
		});
		
		$('#btnCollapse').click(function() {
			$._tree.expandAll(false);
		    $(this).hide();
		    $('#btnExpand').show();
		});
		
		$('#btnRefresh').click(function() {
			queryDeptTree();
		});




	</script>
</body>

</html>